import React from 'react';

class Content extends React.Component {
  
  onClick = () =>{
    //报错不能修改，props最好只读，不要修改
    // this.props.title = '被我修改了'

    this.props.obj.a = 'world'
    //强制渲染，因为对象没有改变，改变的是对象的属性React认为还是同一个对象，所以改变它的属性并不会让React重新渲染
    // this.forceUpdate()
  }


  render() {
    return <div>
      <h3>{this.props.title}</h3>
      <p>{this.props.content}</p>
      <p onClick = {this.onClick}>{this.props.obj.a}</p>
      </div>;
  }
}

 const Demo = () =>
  <> 
    <Content title="我是标题"  content="我是内容" obj={{a:'hello'}} />
    {/* <Content title="我也是标题"  content={undefined}/> */}
  </>

export default Demo;
